import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { Icon, TextareaItem, Switch, List, DatePicker, SegmentedControl, Button, Modal, SwipeAction, Tools } from 'weaver-mobile';
import { withRouter, Route } from 'react-router-dom';
import RemindAddFormStore from './../../stores/remind/RemindAddFormStore';
import { Form, BrowserHrm, Browser, Reply } from 'weaver-mobile-page';
import moment from 'moment';
import {toJS } from 'mobx';
import { createForm } from 'rc-form';
import { findDOMNode } from 'react-dom';
const getLabel = Tools.getLabel;
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
    wrapProps = {
        onTouchStart: e => e.preventDefault(),
    };
}
@withRouter
@observer
export default class RemindAddForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            store: new RemindAddFormStore(),
            modal2: false,
            value: ["保持联系推进"],
        }
    }
    componentWillMount() {
        const { store } = this.state;
        const { doNew } = store;
        doNew(this);
    }
    render() {
        const { store } = this.state;
        const { reply, receiverBroswer, receiverBroswerValue, setState, chanceBroswerValue, chanceBroswer,
            timedSende, textareaValue, senderTime, commonLanguageList, customerBroswerValue, contacterBroswerValue, customerBroswer, contacterBroswer,
            customerid, selectedIndex } = store;
        //方法
        const { timedSendeChange, sendWayChange, textareaValueChange, dataPickChange, submitCommomReply, saveAddRemind, resetForm, deleteCommonLanguage } = store;
        let today = moment().format('YYYY-MM-DD');

        return (
            <div ref={container => this.container = container} style={{ display: "flex", height: "100%", flexDirection: "column" }}>
                <div style={{ flex: "1 1" }}>
                    <div className='crm-remind-part1' >
                        <TextareaItem
                            placeholder={getLabel('514764', '点击输入提醒内容...')}
                            labelNumber={5}
                            rows={3}
                            clear={true}
                            onChange={(value) => textareaValueChange(value)}
                            name="remindContent"
                            value={textareaValue}
                        />
                        <div style={{ border: "0.5px solid #ddd" }}></div>
                        <div className='crm-remind-common-text'>
                            <div style={{ display: "flex" }} onClick={() => { this.onReplyClick() }}>
                                <Icon type='editor' />
                                <div style={{ marginLeft: "10px" }}>{getLabel('514765', '新建常用语')}</div>
                            </div>
                            <div style={{ display: "flex", margin: "0 0 0 auto " }} onClick={() => { this.showModal("modal2") }}>
                                <Icon type='tianjia' />
                                <div style={{ marginLeft: "10px" }}>{getLabel('131178', '添加常用语')}</div>
                            </div>
                        </div>
                    </div>
                    <div className='crm-remind-part2'>
                        <BrowserHrm
                            label={getLabel('15525', '接收人')}
                            store={receiverBroswer}
                            hasAdvanceSerach
                            isSingle={false}
                            isSingle={true}
                            type={1}
                            onChange={(...arg) => {
                                setState({ receiverBroswerValue: arg[2] });
                            }}
                            valueArray={receiverBroswerValue}
                            viewAttr={3}

                        />
                        <Browser
                            label={getLabel("84372", "相关商机")}
                            store={chanceBroswer}
                            hasAdvanceSerach
                            type={316}
                            onChange={(...arg) => {
                                setState({ chanceBroswerValue: arg[2] });
                            }}
                            dataParams={{ customer: customerid }}
                            valueArray={chanceBroswerValue}
                        />
                        <Browser
                            label={getLabel("783", "相关客户")}
                            store={customerBroswer}
                            hasAdvanceSerach
                            type={7}
                            onChange={(...arg) => {
                                setState({ customerBroswerValue: arg[2] });
                            }}
                            valueArray={customerBroswerValue}
                        />
                        <Browser
                            label={getLabel("84373", "相关联系人")}
                            dataParams={{ customerid: customerid }}
                            store={contacterBroswer}
                            hasAdvanceSerach
                            type={67}
                            onChange={(...arg) => {
                                setState({ contacterBroswerValue: arg[2] });
                            }}
                            valueArray={contacterBroswerValue}
                        />
                        <div className='crm-remind-item-row'>
                            <div className='crm-remind-item-title'>{getLabel('26457', '发送方式')}</div>
                            <div className='crm-remind-item-right' style={{ paddingTop: "8px" }}>
                                <SegmentedControl
                                    selectedIndex={selectedIndex}
                                    values={[getLabel('127006', '应用内'), getLabel('22825', '短信')]}
                                    onChange={(e) => {
                                        sendWayChange(e.nativeEvent.selectedSegmentIndex);
                                    }}
                                    // onValueChange={(value) => { sendWayChange(value) }}
                                    style={{ height: '30px', width: '190px' }}
                                />
                            </div>
                        </div>
                        <div className='crm-remind-item-row'>
                            <div className='crm-remind-item-title'>{getLabel('32028', '定时发送')}</div>
                            <div className='crm-remind-item-right'>
                                <Switch
                                    checked={timedSende}
                                    onChange={(checked) => {
                                        timedSendeChange(checked);
                                    }}
                                />
                            </div>
                        </div>
                        <List >
                            {timedSende && <DatePicker
                                mode="datetime"
                                minDate={today}
                                maxDate="2100-12-30"
                                onChange={(date) => { dataPickChange(date) }}
                                value={senderTime}
                            >
                                <List.Item >{getLabel('18961', '发送时间')}</List.Item>
                            </DatePicker>}
                        </List>
                    </div>
                </div>
                <div className='crm_search_history_buttoms'>
                    <div className='crm_search_history_buttom'>
                        <Button onClick={() => { resetForm() }}>{getLabel('2022', '重置')}</Button>
                    </div>
                    <div className='crm_search_history_buttom'>
                        <Button type="primary" onClick={() => { saveAddRemind() }} >{getLabel('826', '确定')} </Button>
                    </div>
                </div>
                <Modal
                    popup
                    visible={this.state.modal2}
                    onClose={() => { this.onClose("modal2") }}
                    animationType="slide-up"
                >
                    <div className="commonlanguage-picker">
                        <div className="am-picker-popup-header">
                            <div className="am-picker-popup-item am-picker-popup-header-left" onClick={() => { this.onClose("modal2") }}></div>
                            <div className="am-picker-popup-item am-picker-popup-title" ></div>
                            <div className="am-picker-popup-item am-picker-popup-header-right" onClick={() => { this.onClose("modal2") }}>{getLabel('201', '取消')}</div>
                        </div>
                        {this.getCommonLanguages()}
                    </div>
                </Modal>
                <Reply
                    wrappedComponentRef={ref => this.replyRef = ref} // 由于react升级，ref={ref => this.replyRef = ref} 这种方式不能用了，这里取ref请按照目前给的这个方式
                    store={reply}
                    visible={false}
                    onSubmit={datas => submitCommomReply(datas)}
                    placeholder={getLabel('514763', '请输入常用语...')}
                />
            </div >
        );
    }

    onReplyClick = () => {
        const replyRef = this.replyRef; // 避免某一瞬间找不到this.replyRef
        if (replyRef) {
            replyRef.setVisible(true, () => {
                replyRef.getInputFocus();
            });
        }
    }

    onChange = (value) => {
        // console.log(value);
        this.setState({
            value,
        });
    }
    onClose = (value) => {
        // console.log(value)
        this.setState({
            [value]: false,
        });
    }

    //控制下拉按钮的隐藏与显示
    showModal = (key) => {
        // console.log(key)
        this.setState({
            [key]: true,
        });
    }

    //给输入框赋值  
    copyValueToTextarea = (value, id) => {
        const { textareaValueChange, saveCommonLanguageCount } = this.state.store;
        textareaValueChange(value);

        this.onClose("modal2")
    }
    getCommonLanguages = () => {
        const { commonLanguageList = [], deleteCommonLanguage, saveCommonLanguageCount } = this.state.store;
        let commonLanguages = [];
        commonLanguageList.length > 0 && commonLanguageList[0].map((item, index) => {
            const { label, value, id } = item;
            if (!id || id == "") {
                commonLanguages.push(
                    <div
                        dangerouslySetInnerHTML={{ __html: value }}
                        onClick={() => { this.copyValueToTextarea(value, id); }}
                        key={index}
                        className='crm-remind-commonlanguage-item'
                    />
                );
            } else {
                commonLanguages.push(
                    <SwipeAction
                        key={index}
                        // style={{ backgroundColor: 'gray' }}
                        autoClose
                        right={[
                            {
                                text: getLabel('91', '删除'),
                                onPress: () => { deleteCommonLanguage({ id }) },
                                style: { backgroundColor: '#F4333C', color: 'white' },
                            },
                        ]}
                    >
                        <div
                            dangerouslySetInnerHTML={{ __html: value }}
                            onClick={() => { this.copyValueToTextarea(value, id); saveCommonLanguageCount({ id }); }}
                            key={index}
                            className='crm-remind-commonlanguage-item'
                        />
                    </SwipeAction>

                );
            }
        });
        return <div className="crm-remind-commonlanguage-main"> <div className='crm-remind-commonlanguage'>{commonLanguages}</div></div>
    }
}